<template>
  <div>
    <!--  首先是一个背景图片-->
    <div class="photo">
      <h3>这是一个背景图</h3>
    </div>
    <!--  搜索-->
    <div class="serach" >

<!--      <el-dropdown class="dropd">-->
<!--        <el-button type="primary"-->
<!--                   style="background-color: white;-->
<!--      color: black;font-size: 16px;-->
<!--      border: none;-->
<!--      height: 50px">-->
<!--          职位类型-->
<!--          <el-icon>-->
<!--            <arrow-down/>-->
<!--          </el-icon>-->
<!--        </el-button>-->

<!--        <template #dropdown>-->
<!--          <el-dropdown-menu>-->
<!--            <el-dropdown-item>互联网/AI</el-dropdown-item>-->
<!--            <el-dropdown-item>电子/电气/通信</el-dropdown-item>-->
<!--            <el-dropdown-item>产品</el-dropdown-item>-->
<!--            <el-dropdown-item>运营</el-dropdown-item>-->
<!--            <el-dropdown-item>销售</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </template>-->
<!--      </el-dropdown>-->

        <el-cascader

            v-model="value"
            :options="options"
            :props="props"
            @change="handleChange"
            style="background-color: white;
            color: black;font-size: 16px;
            margin-left: 220px;"
            />


      <el-input class="input" v-model="input" placeholder="所搜职位、公司"></el-input>
      <el-button class="el-button" type="primary"
                 style="font-size: 20px;
               background-color: #00bebd;
               width: 120px;height: 50px;
               margin-top: -10px;">搜索
      </el-button>
      <span style=" position: relative;top: -50px;margin-left: 330px;">
      <a style="color: #666666">热门职位:</a>
        <!--      <el-button class="zhiwei" type="primary" v-for="n in name" >{{n.font}}</el-button>-->
      <el-button type="primary" style="position: relative;top: -5px;margin-left: 20px;">Java</el-button>
      <el-button type="primary" style="position: relative;top: -5px;margin-left: 10px;">PHP</el-button>
      <el-button type="primary" style="position: relative;top: -5px;margin-left: 10px;">测试工程师</el-button>
      <el-button type="primary" style="position: relative;top: -5px;margin-left: 10px;">运维工程师</el-button>
    </span>
    </div>

    <!--轮播图和职位表-->
    <div style="width: 100%">
      <el-carousel indicator-position="outside"
                   style="margin-top: -30px;width: 1000px;
                 margin-left: 250px;
                 ">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 text="2xl" justify="center">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--热招职位-->
    <div class="position" style="width: 1200px;margin: 0 auto">
      <h1 style="margin: 0 auto;text-align: center">热招职位</h1>
      <el-menu style="height: 45px; font-size: 8px"
               mode="horizontal" router active-text-color="#00ffff">
        <el-menu-item index="/list?type=1">销售</el-menu-item>
        <el-menu-item index="/list?type=2">服务业</el-menu-item>
        <el-menu-item index="/list?type=3">供应链/物流</el-menu-item>
        <el-menu-item index="/list?type=3">金融</el-menu-item>
        <el-menu-item index="/list?type=3">技术</el-menu-item>
        <el-menu-item index="/list?type=3">运营</el-menu-item>
        <el-menu-item index="/list?type=3">市场</el-menu-item>
        <el-menu-item index="/list?type=3">教育培训</el-menu-item>
        <el-menu-item index="/list?type=3">人力/财务/行政</el-menu-item>
      </el-menu>

      <el-row>
        <el-col :span="8" v-for="d in detail" style="margin-top: 20px;">
          <el-card style="width: 350px;height: 120px;margin-left: 50px">
      <span style="display: block;font-size: 15px">
        {{ d.title }}
        <span style="float: right;color: red">{{ d.salary }}</span>
      </span>
            <div style="margin-top: 8px">
              <span style="font-size: 13px;margin-left: 10px">{{ d.area }}</span>
              <span style="font-size: 13px;margin-left: 10px">{{ d.company }}</span>
              <span style="font-size: 13px;margin-left: 10px">{{ d.experience }}</span>
            </div>
            <div style="margin-top: 17px">
              <span>{{ d.company }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>

    <!--热招职位-->
    <div class="position" style="width: 1200px;margin: 100px auto">
      <h1 style="margin: 0 auto;text-align: center">推荐</h1>
      <el-menu style="height: 45px; font-size: 8px"
               mode="horizontal" router active-text-color="#00ffff">
        <el-menu-item index="/list?type=1">销售</el-menu-item>
        <el-menu-item index="/list?type=2">服务业</el-menu-item>
        <el-menu-item index="/list?type=3">供应链/物流</el-menu-item>
        <el-menu-item index="/list?type=3">金融</el-menu-item>
        <el-menu-item index="/list?type=3">技术</el-menu-item>
        <el-menu-item index="/list?type=3">运营</el-menu-item>
        <el-menu-item index="/list?type=3">市场</el-menu-item>
        <el-menu-item index="/list?type=3">教育培训</el-menu-item>
        <el-menu-item index="/list?type=3">人力/财务/行政</el-menu-item>
      </el-menu>

      <el-row>
        <el-col :span="8" v-for="d in detail" style="margin-top: 20px;">
          <el-card style="width: 350px;height: 120px;margin-left: 50px">
      <span style="display: block;font-size: 15px">
        {{ d.title }}
        <span style="float: right;color: red">{{ d.salary }}</span>
      </span>
            <div style="margin-top: 8px">
              <span style="font-size: 13px;margin-left: 10px">{{ d.area }}</span>
              <span style="font-size: 13px;margin-left: 10px">{{ d.company }}</span>
              <span style="font-size: 13px;margin-left: 10px">{{ d.experience }}</span>
            </div>
            <div style="margin-top: 17px">
              <span>{{ d.company }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import {Delete, Edit, Search, Share, Upload} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";

const value = ref([])

const props = {
  expandTrigger: 'hover'
}

const handleChange = (value) => {
  console.log(value)
}

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'color',
            label: 'Color',
          },
          {
            value: 'typography',
            label: 'Typography',
          },
          {
            value: 'icon',
            label: 'Icon',
          },
          {
            value: 'button',
            label: 'Button',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
          {
            value: 'checkbox',
            label: 'Checkbox',
          },
          {
            value: 'input',
            label: 'Input',
          },
          {
            value: 'input-number',
            label: 'InputNumber',
          },
          {
            value: 'select',
            label: 'Select',
          },
          {
            value: 'cascader',
            label: 'Cascader',
          },
          {
            value: 'switch',
            label: 'Switch',
          },
          {
            value: 'slider',
            label: 'Slider',
          },
          {
            value: 'time-picker',
            label: 'TimePicker',
          },
          {
            value: 'date-picker',
            label: 'DatePicker',
          },
          {
            value: 'datetime-picker',
            label: 'DateTimePicker',
          },
          {
            value: 'upload',
            label: 'Upload',
          },
          {
            value: 'rate',
            label: 'Rate',
          },
          {
            value: 'form',
            label: 'Form',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'tag',
            label: 'Tag',
          },
          {
            value: 'progress',
            label: 'Progress',
          },
          {
            value: 'tree',
            label: 'Tree',
          },
          {
            value: 'pagination',
            label: 'Pagination',
          },
          {
            value: 'badge',
            label: 'Badge',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
          {
            value: 'loading',
            label: 'Loading',
          },
          {
            value: 'message',
            label: 'Message',
          },
          {
            value: 'message-box',
            label: 'MessageBox',
          },
          {
            value: 'notification',
            label: 'Notification',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu',
          },
          {
            value: 'tabs',
            label: 'Tabs',
          },
          {
            value: 'breadcrumb',
            label: 'Breadcrumb',
          },
          {
            value: 'dropdown',
            label: 'Dropdown',
          },
          {
            value: 'steps',
            label: 'Steps',
          },
        ],
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog',
          },
          {
            value: 'tooltip',
            label: 'Tooltip',
          },
          {
            value: 'popover',
            label: 'Popover',
          },
          {
            value: 'card',
            label: 'Card',
          },
          {
            value: 'carousel',
            label: 'Carousel',
          },
          {
            value: 'collapse',
            label: 'Collapse',
          },
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]


const name = ref([
  {
    "id": "1",
    "font": "Java"
  },
  {
    "id": "2",
    "font": "PHP"
  },
  {
    "id": "3",
    "font": "测试工程师"
  },
  {
    "id": "4",
    "font": "运维工程师"
  }
])
const detail = [
  {
    "id": "1",
    "title": "项目经理",
    "salary": "7000-1000k",
    "area": "北京",
    "experience": "1-3年",
    "company": "字节跳动",
  },
  {
    "id": "2",
    "title": "Java开发工程师",
    "salary": "9000-1200k",
    "area": "北京",
    "experience": "1-3年",
    "company": "字节跳动",
  },
  {
    "id": "3",
    "title": "网络运维与管理",
    "salary": "7000-800k",
    "area": "北京",
    "experience": "1-3年",
    "company": "网易",
  },
  {
    "id": "4",
    "title": "项目经理",
    "salary": "7000-1000k",
    "area": "北京",
    "experience": "1-3年",
    "company": "字节跳动",
  },
  {
    "id": "5",
    "title": "Java开发工程师",
    "salary": "9000-1200k",
    "area": "北京",
    "experience": "1-3年",
    "company": "字节跳动",
  },
  {
    "id": "6",
    "title": "网络运维与管理",
    "salary": "7000-800k",
    "area": "北京",
    "experience": "1-3年",
    "company": "网易",
  }
]
</script>

<style scoped>


.photo {
  background-color: #1effc5;
  width: 100%;
  height: 120px;
  /*margin-top: -20px;*/
  overflow: hidden;
}

.serach {
  width: 800px;
  float: top;

}

.dropd {
  float: top;
  position: relative;
  top: 90px;
  margin-left: -810px;
}

.input {
  height: 50px;
  position: relative;
  margin-left: 430px;
  top: -30px;
}

.el-button {
  position: relative;
  top: -70px;
  margin-left: 1120px;
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

</style>
